Responsive Web Design Tutorial 7

The orientation CSS media feature can be used to test the orientation of the viewport (or the page box, for paged media).

Media queries allow you to apply CSS styles depending on a device's media type (such as print vs. screen) or other features or characteristics.

在css 插入css 時加條件。 @import ... orientation: 橫向/縱向顯示. @media all and (orientation:portrait) { … } @media all and (orientation:landscape) { … }.

... CSS。 } 瀏覽器直立或橫放​. @media screen and (orientation: portrait) { // 直立時套用 } @media screen and (orientation: landscape) { // 橫放時 ...

There is a useful attribute/function in CSS called orientation which has two options: Landscape; Portrait. And this is how you can use it:

Here is my media query: @media screen and (min-device-width: 768px) and (max-device-width: 1824px) and (orientation : portrait){

I want to make a media query for the slide show landscape, for small phones and tablets for example my .text class is the exact same code on landscape as is my ...

You can have a set of CSS properties that will only apply when the browser window is wider than its height, a so called Landscape orientation. Use a lightblue ...

Media query is a CSS technique introduced in CSS3. It uses the @media rule to include a block of CSS properties only if a certain condition is true.